import 'package:flutter/material.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';

import '../common/style/colors.dart';
import 'app_bottom_bar.dart';
import 'image_view.dart';

class TabIcons extends StatefulWidget {
  const TabIcons({
    Key? key,
    required this.tabIconData,
    required this.removeAllSelect,
    required this.normalIconSize,
    required this.isChecked,
  }) : super(key: key);

  final TabIconData tabIconData;
  final Function removeAllSelect;
  final double normalIconSize;

  // 是否选中
  final bool isChecked;

  @override
  _TabIconsState createState() => _TabIconsState();
}

class _TabIconsState extends State<TabIcons> with TickerProviderStateMixin {
  late var animationController = AnimationController(
    vsync: this,
    duration: const Duration(milliseconds: 400),
  );

  @override
  void initState() {
    super.initState();
  }

  void setAnimation() {
    animationController.reset();
    animationController.forward();
  }

  Widget _iconBox() {
    var size = widget.tabIconData.title == null ? 36.r : 24.r;
    return SizedBox(
      width: size,
      height: size,
      child: ImageView(
        url: widget.tabIconData.selectIcon == null
            ? widget.tabIconData.icon
            : (widget.isChecked ? widget.tabIconData.selectIcon! : widget.tabIconData.icon),
      ),
    );
  }

  Widget _labelBox(theme) {
    return widget.tabIconData.title == null
        ? const SizedBox()
        : Text(widget.tabIconData.title!,
            style: TextStyle(
              fontSize: 10.sp,
              color: widget.isChecked ? theme.tabBarTheme.labelColor : theme.tabBarTheme.unselectedLabelColor,
            ));
  }

  Widget _centerAdd() {
    // return Container(
    //   width: 36.r,
    //   height: 36.r,
    //   alignment: Alignment.center,
    //   decoration: const BoxDecoration(
    //     shape: BoxShape.circle,
    //     // 线性渐变，分别设置渐变的颜色，起始点
    //     color: AppColors.primary,
    //     boxShadow: [BoxShadow(color: Color(0xffb4f6e3), blurRadius: 8,spreadRadius: 0)],
    //   ),
    //   child: const Icon(
    //     Icons.add,
    //     color: AppColors.white,
    //     size: 18,
    //   ),
    // );
    return SizedBox(
      width: 36.r,
      height: 36.r,
    );
  }

  @override
  Widget build(BuildContext context) {
    var theme = Theme.of(context);
    return Container(
      alignment: Alignment.center,
      child: Stack(
        children: [
          Container(
            alignment: Alignment.center,
            child: !widget.tabIconData.animate
                ? _centerAdd()
                : InkResponse(
                    child: Column(
                      mainAxisSize: MainAxisSize.min,
                      children: [
                        /// 图标
                        IgnorePointer(
                          ignoring: true,
                          child: widget.tabIconData.animate
                              ? RotationTransition(
                                  turns: Tween<double>(begin: -0.12, end: 0.0).animate(CurvedAnimation(
                                      parent: animationController,
                                      curve: const Interval(0.75, 1.0, curve: Curves.easeInCubic))),
                                  child: RotationTransition(
                                    turns: Tween<double>(begin: 0.12, end: -0.12).animate(CurvedAnimation(
                                        parent: animationController,
                                        curve: const Interval(0.25, 0.75, curve: Curves.easeInCubic))),
                                    child: RotationTransition(
                                      turns: Tween<double>(begin: 0.0, end: 0.12).animate(CurvedAnimation(
                                          parent: animationController,
                                          curve: const Interval(0, 0.25, curve: Curves.easeInCubic))),
                                      child: _iconBox(),
                                    ),
                                  ),
                                )
                              : _iconBox(),
                        ),
                        _labelBox(theme),
                      ],
                    ),
                    onTap: () {
                      // 去重点击
                      if (!widget.isChecked) {
                        setAnimation();
                        widget.removeAllSelect();
                      }
                    },
                  ),
          ),
          Positioned(
            right: 12.r,
            top: 2.h,
            child: widget.tabIconData.dot > 0
                ? Container(
                    width: 14.r,
                    height: 14.r,
                    alignment: Alignment.center,
                    padding: const EdgeInsets.all(1.5),
                    decoration:
                        const BoxDecoration(color: AppColors.red, borderRadius: BorderRadius.all(Radius.circular(10))),
                    child: Text(
                      widget.tabIconData.dot > 9 ? '9+' : widget.tabIconData.dot.toString(),
                      style: const TextStyle(color: AppColors.white, fontSize: 9),
                    ),
                  )
                : Container(),
          ),
        ],
      ),
    );
  }
}
